<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>社区返乡人员报备管理系统</title>
</head>
<style>
    h1,div {
        text-align: center;
    }
    #tJia{
        margin-right: 34.4em;
    }
    table {
        background: antiquewhite;
        width: 1000px;
        margin: 0 auto;
    }
    tr:nth-of-type(odd){
        background: azure;
    }
    table,td,th {
        border: 1px solid aquamarine;
        border-collapse: collapse;
        border-spacing:0;
    }
</style>
<body>
<script th:src="@{/js/jquery.js}" src="/js/jquery.js"></script>

<div>
    <form id="myform" >
    <label>返回日期</label>
    <input type="text" id="returnDate" name="returnDate">
    <input type="hidden"  name="currentPage" value="1">
    <input type="hidden"  name="showSize" value="3">
    <input type="button"  onclick="loadData()" value="查询">
    <input type="button" value="新增" onclick="javascript:location.href='toAdd'">
    </form>
</div>
<div id="return-table">
    <table>
        <tbody>
        <tr id="da">
            <th>姓名</th>
            <th>身份证</th>
            <th>电话</th>
            <th>出发城市</th>
            <th>返乡日期</th>
            <th>是否访谈</th>
            <th>创建日期</th>
            <th>操作</th>
        </tr>
        </tbody>
    </table>
    <p id="page-info">
        <a href="javascript:void(0)" >首页</a>
        <a href="javascript:void(0)"> 上一页</a>
        <a href="javascript:void(0)">下一页</a>
        <a href="javascript:void(0)">尾页</a>
        1/5，共10条数据
    </p>
</div>

<script >
    $(function () {
        loadData();
    });
    //加载数据
    function loadData(){
        //清空原有数据
       $("tbody>tr:gt(0)").remove();
       $("#page-info").html("");

        $.getJSON("/list",$("#myform").serialize(),function (ret) {
            let  data = ret.data;
            let rplist = "";
            //列表
            if (data != null && data.length != 0){
                for (let rp of data){
                    rp.interviewStatus = rp.interviewStatus == 'N' ? "否":"是"
                    rplist += `<tr>
                        <td>${rp.personName}</td>
                        <td>${rp.personId}</td>
                        <td>${rp.personPhone}</td>
                        <td>${rp.sendCity}</td>
                        <td>${rp.returnDate}</td>
                        <td>${rp.interviewStatus}</td>
                        <td>${rp.createDate}</td>
                        <td><a href="toModify/${rp.id}" >修改</a></td>
                    </tr>`
                }
                $("tbody>tr:last-child").after(rplist);
            }
            //分页
            let pageinfo = `<a href="javascript:void(0)" onclick="changePage(1)" >首页</a>
                <a href="javascript:void(0)" onclick="changePage(parseInt(${ret.currentPage})-1)"> 上一页</a>
                <a href="javascript:void(0)" onclick="changePage(parseInt(${ret.currentPage})+1)">下一页</a>
                <a href="javascript:void(0)" onclick="changePage(${ret.totalPage})">尾页</a>
                ${ret.currentPage}/${ret.totalPage}，共${ret.total}条数据`;
            $("#page-info").html(pageinfo);

        });
    }
    //分页
    function changePage(page){
        //修改页码
        $("[name=currentPage]").val(page);
        loadData();
    }
</script>
</body>
</html>